<template>
  <div class="min-h serveProject bg-wt">
    <div class="baseList">
      <div class="tableBoxs">
        <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
        <t-base-table row-key="index" :data="data" :columns="COLUMNS">
          <template #rowIndex="{rowIndex}">
            {{ rowIndex + 1 }}
          </template>
          <template #image="{row}">
            <div>
              <div class="tdesign-demo-image-viewer__base">
                <t-image-viewer :images="[row.image]">
                  <template #trigger="{ open }">
                    <div class="tdesign-demo-image-viewer__ui-image">
                      <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                      <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                        <span>
                          <BrowseIcon size="1.4em" /> 预览
                        </span>
                      </div>
                    </div>
                  </template>
                </t-image-viewer>
              </div>
            </div>
          </template>
          <template #price="{row}">
            {{ row.price.toFixed(2) }}
          </template>
          <!-- 操作栏 -->
          <template #op="{ row }">
            <div class="operateCon">
              <a class="btn-dl">删除</a>
              <a class="font-bt">编辑</a>
              <a class="delete">禁用</a>
            </div>
          </template>
        </t-base-table>
        <t-pagination v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize" :total="pagination.total" @change="onChange"
        />
      </div>
    </div>
  </div>
</template>
<script setup lang="jsx">
import { onMounted, ref } from 'vue';
import { COLUMNS } from './constants';
import { getProjectList } from '@/api/serve';

const data = ref([]);

const research = async () => { 
  const result = await getProjectList(pagination.value)
  data.value = result.data.records
  pagination.value.total = result.data.total
 }

 onMounted(() => { 
  research()
  })

const onChange = (pageInfo) => { 
  console.log(pageInfo)
  pagination.value.pageNum = pageInfo.current
  pagination.value.pageSize  = pageInfo.pageSize
  research()
 }

const pagination = ref({
  pageNum: 1,
  pageSize: 10,
  total:0,
});
</script>
